<template>
  <section class='f-device-detail'>
    <van-nav-bar class="f-nav-bar" title="设备详情" :style="{'background': '#06156A'}">
      <template #left>
        <van-icon name="arrow-left" size="18" @click="pageBack" />
      </template>
    </van-nav-bar>

    <ul class="f-cell-box">
      <li class="f-cell f-no-radius-bottom">
        <div class="g-flex-ct">
          <p class="f-ml-10">设备名称</p>
        </div>
        <div class="g-flex-ct" @click="pageJump('/device/updateName')">
          <p class="f-mr-05">{{formData.alias || formData.devModel || '--'}}</p>
          <img style="width: 6px;height: 10px;" src="@/assets/icons/more_btn_enter.png" alt="">
        </div>
      </li>
      <li class="f-cell f-no-radius-bottom">
        <div class="f-flex-between">
          <p class="f-ml-10">设备型号</p>
        </div>
        <p style="color: #aaaaaa;">{{formData.devModel || '--'}}</p>
      </li>
      <li class="f-cell f-no-radius-bottom">
        <div class="g-flex-ct">
          <p class="f-ml-10">设备IMEI</p>
        </div>
        <p style="color: #aaaaaa;">{{formData.imei || '--'}}</p>
      </li>
      <li class="f-cell f-no-radius-top">
        <div class="g-flex-ct">
          <p class="f-ml-10">用户码</p>
        </div>
        <p style="color: #aaaaaa;">{{formData.code || '--'}}</p>
      </li>

      <!-- <li class="f-cell f-mt-30">
        <div class="g-flex-ct">
          <p class="f-ml-10" style="color:#3967D9">管理设备</p>
        </div>
        <div class="g-flex-ct" @click="toDevicePage()">
          <div class="f-mr-20">
            <p>初始账号：admin</p>
            <p class="f-mt-05">初始密码：admin</p>
          </div>
          <img style="width: 6px;height: 10px;" src="@/assets/icons/more_btn_enter.png" alt="">
        </div>
      </li> -->
    </ul>

    <div class="f-btn-box">
      <van-button class="f-btn" type="danger" plain round size="mini" @click="popup=true">解除绑定</van-button>
    </div>

    <van-popup v-model:show="popup" position="bottom" round class="f-popup">
      <p class="f-title">确定要解绑该设备吗？</p>
      <p>IMEI：{{formData.imei || '--'}}</p>
      <p class="f-mt-05">用户码：{{formData.code || '--'}}</p>
      <div class="f-btn">
        <van-button style="width: 150px;color:#666666" block round color="#DADADA" @click="popup = false">取消</van-button>
        <van-button style="width: 150px;" type="primary" block round @click="handleUnbind()">解除绑定</van-button>
      </div>
    </van-popup>
  </section>
</template>

<script>
import { successDeal } from '@/utils/utils';
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from '../api'

export default {
  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      formData: {},
      popup: false,
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '设备详情',
        show: false,
        left: true,
        leftType: 'back',
        bg: ''
      });

      getCardInfo()
    })

    const getCardInfo = () => {
      let json = {
        "code": route.query.code,
        "endTime": "",
        "page": 1,
        "startTime": "",
        "type": ""
      }
      api.cardInfo(json).then(res => {
        state.formData = res.data
      })
    }

    // 解除绑定
    const handleUnbind = () => {
      let json = {
        code: state.formData.code
      }
      api.unbind(json).then(res => {
        successDeal('已解除绑定')
        setTimeout(() => {
          router.go(-1)
        }, 500);
      })
    }

    const pageJump = (path) => {
      router.push({ path, query: { imei: state.formData.imei } })
    }

    const pageBack = () => {
      router.go(-1)
    }

    const toDevicePage = () => {
      JsBridge.callHandler('openUrl', 'http://192.168.43.1', (response) => {
        console.log('openUrl', response)
      })
    }

    return {
      ...toRefs(state),
      handleUnbind,
      pageJump,
      pageBack,
      toDevicePage
    }
  }
}
</script>

<style lang='scss' scoped>
.f-device-detail {
  :deep(.van-nav-bar__title) {
    color: #fff;
  }
  :deep(.van-nav-bar .van-icon) {
    color: #fff;
  }
  .f-cell-box {
    .f-cell {
      position: relative;
      padding: 18px 11px;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: 400;
      font-size: 14px;
      color: #424242;
    }
    .f-no-radius-bottom {
      border-radius: 7px 7px 0 0;
    }
    .f-no-radius-bottom::before {
      content: "";
      width: 98%;
      height: 1px;
      background: rgba(170, 170, 170, 0.2);
      position: absolute;
      bottom: 0;
      left: 2%;
    }
    .f-no-radius-top {
      border-radius: 0 0 7px 7px;
    }
  }
  .f-btn-box {
    text-align: center;
    margin-top: 49px;
    .f-btn {
      padding: 20px 90px;
      font-weight: 400;
      font-size: 16px;
      color: #fd6a56;
    }
  }
  .f-popup {
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    text-align: center;
    padding: 53px 25px 42px 25px;
    .f-title {
      font-size: 16px;
      color: #000000;
      margin-bottom: 20px;
    }
    .f-btn {
      display: flex;
      justify-content: space-between;
      margin-top: 40px;
    }
  }
}
</style>